<!DOCTYPE html><!--suppress ALL-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>thymeleaf 模板引擎</title>
    <script src="https://unpkg.com/axios"></script>
</head>

<body>
<script>
    function a1() {
        axios.get('/api/show?id=11&name=李强').then(res => {
            console.log("success......")
            console.log(res.data.method)
            console.log(res.data.data)
        }).catch(err => {
            console.log("error...............................")
            console.log(err)
        })
    }


    function a2() {
        let id = 55
        let name = '李磊'
        axios({
            method: 'get',
            url: '/api/show',
            params: {id, name}
        }).then(res => {
            console.log("success......")
            console.log(res.data.method)
            console.log(res.data.data)
        }).catch(err => {
            console.log("error...............................")
            console.log(err)
        })
    }


    //show(@RequestBody User user,Integer age,String addr, HttpServletRequest req)
    function a3() {
        let id = 553
        let name = '李磊3'
        axios({
            method: 'post',
            url: '/api/show?age=22',
            params:{addr:'河南省郑州市'},
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: {id, name} //请求负载数据 @RequestBody User user
        }).then(res => {
            console.log("success......")
            console.log(res.data.method)
            console.log(res.data.data)
        }).catch(err => {
            console.log("error...............................")
            console.log(err)
        })
    }

    a4()
    function a4() {
        let id = 44
        let name = '李磊44'
        axios.post('/api/show?age=18&addr=北京市',{
            id,
            name
        }).then(res => {
            console.log("success......")
            console.log(res.data.method)
            console.log(res.data.data)
        }).catch(err => {
            console.log("error...............................")
            console.log(err)
        })
    }




    function get() {
        //get Content-Type: text/html; charset=utf-8
        fetch("/api/show?id=3&name=李四").then(res => res.json()).then(res => {
            console.log("获取服务器输出的值...........................")
            console.log(res)
        }).catch(err => {
            console.log("catch...........................")
            console.log(err)
        })
    }

    //get()

    function post() {
        //post Content-Type: text/plain;charset=UTF-8
        let id = 663
        let name = '张三丰3'
        fetch("/api/show", {method: 'post', headers: {'content-type': 'application/json;charset=utf-8'}, body: JSON.stringify({id, name})}).then(res => res.json()).then(res => {
            console.log("获取服务器输出的值...........................")
            console.log(res)
        }).catch(err => {
            console.log("catch...........................")
            console.log(err)
        })
    }

    //post2()
    function post2() {
        //post'Content-Type': 'application/json;charset=UTF-8'
        let id = 666
        let name = '张三丰66'
        fetch("/api/show", {
            method: 'post',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            body: JSON.stringify({id, name})
        }).then(res => res.json()).then(res => {
            console.log("获取服务器输出的值...........................")
            console.log(res)
        }).catch(err => {
            console.log("catch...........................")
            console.log(err)
        })
    }

    //post form body "id=6&name=李四"
    function post3() {
        //post application/x-www-form-urlencoded
        let id = 66
        let name = '张三丰'
        fetch("/api/show", {
            method: 'post',
            headers: {'content-type': 'application/x-www-form-urlencoded'},
            body: `id=${id}&name=${name}`
        }).then(res => res.json()).then(res => {
            console.log("获取服务器输出的值...........................")
            console.log(res)
        }).catch(err => {
            console.log("catch...........................")
            console.log(err)
        })
    }

</script>

</body>
</html>
